<template>
	<view class="news-detail">
		<view class="header">
			<text class="title">{{ newsDetail.title }}</text>
		</view>
		<view class="send-time" v-if="newsDetail.news_column_id != 11">
			<text>发送时间：{{ newsDetail.send_time }}</text>
		</view>
		<view class="content">
			<rich-text :nodes="formattedContent"></rich-text>
		</view>
		<view class="report-form" v-if="newsDetail.news_column_id == 10 || newsDetail.news_column_id == 9">
		<!-- <view class="report-form"> -->
			<text class="form-title">报告健康数据</text>
			<view class="form-item">
				<label>报告类型</label>
				<view class="type-buttons">
					<button @click="setReportType(0)" :class="{ selected: reportForm.reportType === 0 }">血压</button>
					<button @click="setReportType(1)" :class="{ selected: reportForm.reportType === 1 }">血糖</button>
				</view>
			</view>
			<view v-if="reportForm.reportType === 0">
				<view class="form-item">
					<label for="systolicPressure">收缩压 (mmHg)</label>
					<input type="number" v-model.number="reportForm.systolicPressure" placeholder="请输入高压">
				</view>
				<view class="form-item">
					<label for="diastolicPressure">舒张压 (mmHg)</label>
					<input type="number" v-model.number="reportForm.diastolicPressure" placeholder="请输入低压">
				</view>
			</view>
			<view v-if="reportForm.reportType === 1">
				<view class="form-item">
					<label for="bloodSugar">血糖 (mg/dL)</label>
					<input type="number" v-model.number="reportForm.bloodSugar" placeholder="请输入血糖值">
				</view>
			</view>
			<button @click="submitReport" class="submit-button">提交</button>
		</view>
		<view class="recommended-articles">
			<text class="articles-title">推荐文章</text>
			<view v-for="(article, index) in recommendedArticles" :key="index" class="article-item"
				@click="goDetail(article.id)">
				<text class="article-title">{{ article.title }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getNewsDetail,
		healthAdd,
		updClick,
		getNewsRelation
	} from "@/api/api";

	export default {
		data() {
			return {
				newsDetail: {
					title: '',
					send_time: '',
					content: ''
				},
				reportForm: {
					reportType: 0,
					systolicPressure: '',
					diastolicPressure: '',
					heartRate: '',
					bloodSugar: '',
					hba1c: '',
					gestationPeriod: '',
					appointmentTime: ''
				},
				recommendedArticles: [{
						title: '如何保持健康的血压水平'
					},
					{
						title: '血糖控制的最佳方法'
					},
					{
						title: '了解高血压的风险因素'
					}
				],
				openid: ""
			};
		},
		methods: {
			async doGetNewsDetail(id) {
				const idData = {
					id
				};
				try {
					const res = await getNewsDetail(idData);
					if (res && res.status === 1) {
						this.newsDetail = res.data;
					} else {
						console.error('请求失败，响应数据：', res);
					}
				} catch (error) {
					console.error('请求出错：', error);
				}
			},

			async doGetNewsRelation(id) {
				const idData = {
					id
				};
				try {
					const res = await getNewsRelation(idData);
					if (res && res.status === 1) {
						this.recommendedArticles = res.data;
					} else {
						console.error('请求失败，响应数据：', res);
					}
				} catch (error) {
					console.error('请求出错：', error);
				}
			},

			goDetail(id) {
				uni.navigateTo({
					url: `/pages/info/info?id=${id}&openid=${this.openid}`
				});
			},
			getIdFromUrl() {
				const query = this.$route.query;
				return query.id ? parseInt(query.id) : 24;
			},
			getOpenIdFromUrl() {
				const query = this.$route.query;
				return query.openid ? query.openid : 'oNiwxw0TGasEZw-X1MjQ5g0EuS_4';
			},
			async updClick(id, openid) {
				const data = {
					id: id,
					openid: openid
				}
				try {
					await updClick(data);
				} catch (error) {
					console.error('请求updClick出错：', error);
				}
			},
			setReportType(type) {
				this.reportForm.reportType = type;
			},
			submitReport() {
				console.log('提交的报告数据：', this.reportForm);
				this.doHealthAdd();
			},
			async doHealthAdd() {
				const idData = {
					record_code: "0000193881",
					user_name: "艾年林",
					phone: "15229553733",
					accid: "",
					type: this.reportForm.reportType === 0 ? "1" : "2",
					height_blood: this.reportForm.systolicPressure || "",
					down_blood: this.reportForm.diastolicPressure || "",
					hr: this.reportForm.heartRate || "",
					fpgl: this.reportForm.bloodSugar || "",
					is_auto: "2",
					open_id: "oNiwxw0TGasEZw-X1MjQ5g0EuS_4",
					uric_acid: "612430197704261119",
					blood_ketone: "",
					temperature: "",
					fvc: "",
					gfr: "",
					tc: "",
					hdl: "",
					ldl: "",
					tg: ""
				};
				try {
					const res = await healthAdd(idData);
					if (res.status !== 1) {
						console.error('请求失败，响应数据：', res);
					} else {
						uni.showToast({
							title: '提交成功',
							icon: 'success',
							duration: 2000
						});
					}
				} catch (error) {
					console.error('请求出错：', error);
				}
			},
		},
		computed: {
			formattedContent() {
				if (this.newsDetail.content) {
					return this.newsDetail.content.replace(/\\u003C/g, '<').replace(/\\u003E/g, '>').replace(/<img /g,
						'<img style="width: 100%;" ');
				}
				return '';
			}
		},
		mounted() {
			const id = this.getIdFromUrl();
			const openid = this.getOpenIdFromUrl();
			this.openid = openid
			this.doGetNewsDetail(id);
			this.doGetNewsRelation(id);
			this.updClick(id, openid);
		}
	};
</script>

<style scoped>
	.news-detail {
		padding: 15px;
		background-color: #fff;
		border-radius: 10px;
		box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
		margin-bottom: 20px;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 24px;
		font-weight: bold;
		color: #333;
		margin-bottom: 5px;
	}

	.send-time {
		margin-bottom: 20px;
		color: gray;
		font-size: 14px;
	}

	.content {
		line-height: 1.6;
		font-size: 16px;
		color: #444;
	}

	.report-form {
		margin: 30px 0;
		padding: 20px;
		border-top: 1px solid #eaeaea;
		background-color: #f9f9f9;
		border-radius: 8px;
	}

	.form-title {
		font-size: 20px;
		font-weight: bold;
		color: #2390FC;
		margin-bottom: 20px;
		text-align: center;
	}

	.form-item {
		margin: 10px 0;
	}

	.form-item label {
		display: block;
		margin-bottom: 10px;
		color: #333;
		font-size: 16px;
	}

	.form-item input {
		padding: 0 10px;
		border: 1px solid #ccc;
		border-radius: 4px;
		box-sizing: border-box;
		background-color: #fff;
		height: 40px;
	}

	.type-buttons {
		display: flex;
		justify-content: space-between;
		margin: 20rpx 0;
	}

	.type-buttons button {
		flex: 1;
		font-size: 15px;
		background-color: #fff;
		color: #333;
		cursor: pointer;
		margin: 0 5px;
		border: none !important;
	}

	.type-buttons button.selected {
		background-color: #2390FC;
		color: #fff;
		border-color: #2390FC;
	}

	.submit-button {
		width: 100%;
		background-color: #2390FC;
		color: #fff;
		border: none;
		font-size: 17px;
		cursor: pointer;
		text-align: center;
		margin-top: 20px;
	}

	.recommended-articles {
		margin-top: 20px;
		padding: 15px;
		background-color: #f4f4f4;
		border-radius: 10px;
	}

	.articles-title {
		font-size: 18px;
		font-weight: bold;
		margin-bottom: 10px;
		color: #2390FC;
	}

	.article-item {
		margin: 10px 0;
	}

	.article-title {
		font-size: 16px;
		color: #333;
	}
</style>